<template>
    <el-card shadow="never" style="width: 450px; min-height: 700px;">

        <Header :data="data" :title="data.codeName" />
        <div class="main">
            <p class="title">详细参数</p>
            <el-descriptions class="margin-top" :column="1" size="default" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            厂商
                        </div>
                    </template>
                    {{ data.manufacturers }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            GPU芯片
                        </div>
                    </template>
                    {{ data.code }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            显存容量
                        </div>
                    </template>
                    {{ data.gpuCapacity }} GB
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            接口类型
                        </div>
                    </template>
                    {{ data.interfaceType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            显存类型
                        </div>
                    </template>
                    {{ data.gpuType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            显存频率
                        </div>
                    </template>
                    {{ data.memoryFrequency }} MHz
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            散热
                        </div>
                    </template>
                    {{ data.cooling }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            建议电源
                        </div>
                    </template>
                    {{ data.power }} W
                </el-descriptions-item>
            </el-descriptions>
        </div>


    </el-card>
</template>

<script setup lang="ts">
import Header from './Header.vue';
const { data } = defineProps({
    data: {
        type: Object,
        default: () => ({})
    }
})
</script>

<style scoped lang="scss">
.main {

    .cell-item {
        font-weight: bold;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
    }
}
</style>